<template>
	<view>
		<template v-if="type == 'img'">
			<view class="btn-img fboxRow Ycenter Xcenter"><image :src="imgUrl" :style="imgStyle" @click="goApp('downLoad')"></image></view>
		</template>
		<template v-else>
			<button hover-class="none"
				:loading="loading"
				v-show="!isOpen"
				class="btn fboxRow Ycenter Xcenter tw"
				id="btn"
				:class="type == 'download' ? 'color-3b6efe' : ''"
				@click="goApp('downLoad')"
			>
				打开 本无名片
			</button>
			<view class="mask" v-if="type != 'download'"></view>
		</template>
		<ModalAppDownload :isDownload.sync="isDownload" :isWeChat.sync="isWeChat" />
	</view>
</template>

<script>
import ModalAppDownload from './modal.app.download';
import { base64decode, base64encode } from '@/static/js/Base64.js';
import { openAppULink, openAppULinkNew } from '@/static/js/common.js';
import { getAndroidVersion } from '@/api/index';
export default {
	name: 'downloadBtn',
	components: {
		ModalAppDownload
	},
	props: {
		type: {
			type: String,
			default: 'other' // other download img
		},
		imgUrl: {
			type: String,
			default: ''
		},
		imgStyle: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: ''
		},
		linkData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		linkId: {
			type: String,
			default: 'usr103rs12t9nk1c'
		},
		isOpeninstall: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			isWeChat: false,
			isDownload: false,
			isOpen: false,
			updateAddress: '',
			loading: false
		};
	},
	created() {
		this.isApp();
		// const vConsole = new VConsole()
	},
	mounted() {
		const script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'https://g.alicdn.com/jssdk/u-link/index.min.js';
		document.getElementsByTagName('head')[0].appendChild(script);
	},
	methods: {
		isApp() {
			getAndroidVersion().then(res => {
				this.updateAddress = res.data.updateAddress;
			});
		},
		goApp() {
			if (this.loading) return;
			this.loading = true;

			// #ifdef H5
			const { bw_link, bw_user_temp } = getApp().getBWData(['bw_link', 'bw_user_temp']);
			const href = window.location.href;
			const obj = {
				sharerId: bw_link.sharerId,
				href: href // .substr(0, href.indexOf("?"))
			};
			const openFun = this.isOpeninstall ? openAppULinkNew : openAppULink;
			openFun(this.linkId, obj, this.updateAddress);
			this.loading = false;
			// #endif
		}
	}
};
</script>

<style scoped>
.btn {
	width: 514rpx;
	height: 92rpx;
	font-size: 32rpx;
	background: #121575;
	box-shadow: 0px 4px 7px 0px rgba(4, 6, 74, 0.51);
	border-radius: 46rpx;
	outline: none;
	border: none;
	position: fixed;
	bottom: 120rpx;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 99;
	color: #fff;
}

.mask {
	width: 100%;
	height: 400rpx;
	background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
	/*background: linear-gradient(0deg, rgba(3, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.21) 100%);*/
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 98;
}

.btn.color-3b6efe {
	background-color: #f0bd42;
	bottom: 60rpx;
	box-shadow: 0px 9px 21px rgba(59, 110, 254, 0.6);
}
.btn-img {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
